<template>
  <div>
    <el-page-header style="color: #409eff" @click="goBack"></el-page-header>

    <div class="user-info">
      <div class="user-info-avatar">
        <el-avatar
          :size="120"
          :src="
            infoUser.avatarUrl ||
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
          "
        />
      </div>
      <div class="user-info-detail">
        <el-descriptions :column="2" size="large">
          <el-descriptions-item label="用户名：" width="150px">
            {{ infoUser.nickname }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间：" width="150px">
            {{ infoUser.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="用户ID：" width="150px">
            {{ infoUser.uid }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间：" width="150px">
            {{ infoUser.updateTime }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号码：" width="150px">
            {{ infoUser.mobile }}
          </el-descriptions-item>
          <el-descriptions-item label="个性签名：" width="150px">
            {{ infoUser.sign }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="user-tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="活动记录" name="first">
          <UserActivity />
        </el-tab-pane>
        <el-tab-pane label="社群记录" name="second">
          <UserCommunity />
        </el-tab-pane>
        <el-tab-pane label="订单记录" name="third">
          <UserOrder />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="UserDetailsPage">
import { ref, onMounted, onUpdated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getUserList } from '@/api/User/user';
import UserActivity from '@/components/User/activity.vue';
import UserCommunity from '@/components/User/platformReview.vue';
import UserOrder from '@/components/User/order.vue';

const router = useRouter();
const route = useRoute();
const activeName = ref('first');
const infoUser = ref({});

const UserList = async () => {
  const res = await getUserList({
    query: { uid: route.params.uid },
  });
  console.log('res', res);
  if (res.data.code === 200) {
    infoUser.value = res.data.data.items[0];
  }
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  UserList();
});
onUpdated(() => {});
</script>

<style lang="scss" scoped>
.back-button {
  margin-bottom: 20px;
  padding: 0 50px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 0 50px;
  height: 180px;
  margin-bottom: 20px;
  .user-info-avatar {
    margin-right: 80px;
  }
  .user-info-detail {
    width: 70%;
  }
}
:deep(.el-descriptions__label) {
  color: #afb1b3;
  width: 120px !important;
  text-align: left;
}

:deep(.el-descriptions__cell) {
  width: 120px;
  padding-right: 20px !important;
}

:deep(.el-descriptions__content) {
  width: 120px;
}
</style>
